<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <div style="height: 585px">
        姓名:<input v-model="Query.name">
        起始时间:<input type="date" v-model="Query.minDate">
        结束时间:<input type="date" v-model="Query.maxDate">
        状态:<select v-model="Query.status">
                <option  :value="null"  >全部</option>
                <option  value="0" >待接受</option>
                <option  value="1" >已接受待处理</option>
                <option  value="2" >已处理</option>
                <option  value="3" >已拒绝</option>
            </select>
        <button class="btn  btn-warning" @click="changePage(1)">搜索</button>

        <table class="table table-bordered table-hover table-striped" id="t">
            <tr>
                <th>编号</th>
                <th>用户账号</th>
                <th>患者姓名</th>
                <th>科室</th>
                <th>时间</th>
                <th>价格</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(p,i) in info">

                <td v-text="i+1"></td>
                <td v-text="p.username"></td>
                <td v-text="p.name"></td>
                <td v-text="p.sname"></td>
                <td v-text="p.date"></td>
                <td v-text="p.price"></td>

                <td v-if="p.status == 0" style="color: lightcoral">待接受</td>
                <td v-else-if="p.status == 1" style="color: orange">已接受待处理</td>
                <td v-else-if="p.status == 2" style="color: lightgreen">已处理</td>
                <td v-else >已拒绝</td>

                <td v-if="p.status == 0">
                    <button class="btn  btn-success"  @click="btn(p.id,1)">接受</button>
                    <button class="btn  btn-danger"  @click="btn(p.id,3)">拒绝</button>
                </td>
                <td v-else-if="p.status == 1">
                    <button class="btn  btn-success"  @click="deal(p.id)">处理</button>
                </td>
                <td v-else-if="p.status == 2">
                    <button class="btn  btn-success"  @click="deal(p.id)">修改</button>
                </td>
                <td v-else>
                    <button class="btn  btn-danger"  @click="del(p.id)">删除</button>
                </td>

            </tr>
        </table>
    </div>
    <div>
        <center>
            <button @click="changePage(1)">首页</button>
            <button @click="changePage(pageinfo.prePage)">上页</button>
            <button @click="changePage(pageinfo.nextPage)">下页</button>
            <button @click="changePage(pageinfo.totalPage)">尾页</button>
            <br>
            <center>当前 {{pageinfo.currentPage}} / {{pageinfo.totalPage}} 页  共 {{pageinfo.totalCount}}条 每页 {{pageinfo.currentCount}}条</center>
        </center>
    </div>

</div>

<script>


    var app = new Vue ({

        el:"#app",
        data:{

            info:[],
            Query:{},
            pageinfo:{}

        },
        methods:{
            changePage:function (a) {
                getData(a, 10);
            },

            btn:function(id,status) {
                $.post("/ssm/dep/caseStatus",{id:id,status:status},function (backData) {
                    getData(app.Query.currentPage,10);
                })
            },

            deal:function(id) {
                window.location.href="/ssm/caseFormDe.html?id="+id;
            },

            del:function(id) {
                $.get("/ssm/dep/deleteCases?id="+id,function (backData) {
                    if(backData.code == 1){
                        getData(app.Query.currentPage,10);
                    }
                })
            }

        }

    });

    function getData(page,count) {
        app.Query.currentPage = page;//第几页
        app.Query.currentCount = count;//每页多少条

        $.post("/ssm/dep/queryCase",app.Query,function (backData) {
            app.info = backData.data.pageData;
            app.pageinfo = backData.data.pageInfo;
        })
    }
    getData(1,10);

</script>

</body>
</html>